<template>
    <div>
        <h5 :style="{color:color}">props</h5>
        <button @click="postMsg" type="button">让子组件执行事件</button>
        <child-one msg="hello" :post="post" @change="changeColor" ref="childRefOne">
          
        </child-one>
    </div>
</template>
<script setup>
import childOne from "./child1.vue";

import { ref } from 'vue'
const color = ref('blue')

const childRefOne = ref();



const post = {
    id: 1,
    title: "My Journey with Vue",
};
const changeColor = (data) => {
    color.value = color.value == 'blue' ? data : 'blue'
}

const postMsg = () => {
    childRefOne.postMsg()

    childRefOne.childRefTwo.sayHello()
}
</script>